import React from 'react';
import { NuiBt } from 'sui';

const BtnVal = ({ label, value, cl="blue", width="w-40", w="w-56", className, hcmd }) => (
    <div className={`inline-flex justify-center ${className}`}>
        <NuiBt color={cl} className={`h-16 ml-8 ${w}`} hcmd={hcmd}>
            <div className="text-2xl">{label}</div>
        </NuiBt>
        <div className={`ml-4 my-2 text-2xl text-white border border-white rounded flex justify-center items-center ${width}`}>{value}</div>
    </div>
);

const Title = ({ label, value, sub, width="w-32", className, cl="white" }) => {
    const getVal = () => {
        if (value) {
            return value;
        }

        return label;
    };

    const st = `${className} ${width} mr-2 py-1 text-2xl border border-${cl} text-${cl} items-center justify-center rounded`;

    if (sub) {
        return (
            <div className={st + "flex-col"}>
                <div className="flex justify-center">
                    {getVal()}
                </div>
                <div className="flex justify-center mx-1">
                    {sub}
                </div>
            </div>
        );
    }

    return (
        <div className={st + "flex"}>
            <div className="flex justify-center">
                {getVal()}
            </div>
        </div>
    );
};

const PVal = ({ label, value, cl="blue", width="w-40", w="w-56", className }) => (
    <div className={`inline-flex justify-center ${className}`}>
        <div className="flex text-3xl text-white h-16 items-center">{label}</div>
        <div className={`ml-4 my-2 text-3xl text-white border border-white rounded flex justify-center items-center ${width}`}>{value}</div>
    </div>
);

const ColorTitle = ({ value, cl, width="w-40", className }) => (
    <div className={className + ` mr-1 flex text-3xl justify-center items-center text-white bg-${cl}-700 ` + width}>
        {value}
    </div>
);

export {ColorTitle, PVal, BtnVal, Title};
